<template>
    <div class="login-box">
        <div class="content" >
            <div class="title">云效客户后台管理系统</div>
            <div class="ipt-box">
                <input type="text" v-model.trim="loginObj.id" placeholder="输入用户账号">
            </div>
            <div class="ipt-box">
                <input type="password" v-model.trim="loginObj.password" placeholder="输入用户密码">
            </div>
            <div class="rem">
                <el-checkbox v-model="remember" label="是否记住密码？" size="large" />
            </div>
            <div >
                <span @click="loginEvt" class="btn">登录 </span><span @click="registerEvt" style="box-shadow: 2px 2px gray;border-radius: 10%;" class="register">注册</span>
            </div>
            
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import ajax from '../../apis/ajax.js'
import { ElMessage, ElLoading } from 'element-plus'
/* 引入加密方法 */
import { MD5 } from 'crypto-js'

const store = useStore()
const router = useRouter()
const route = useRoute()

/* 定义页面的数据 */
const remember = ref(false)

/* 如果记住了密码，需要回显密码和账号 */
let cache = JSON.parse(localStorage.getItem('user-info') || "{}")
if (!!cache.id) remember.value = true
const loginObj = reactive({
    id: cache.id || '',
    password: cache.password || ''
})
onMounted(()=> {
    console.log(router.currentRoute.value)
    store.commit('common/setToken', '')
    
})
function loginEvt() {
    console.log(route)
    let next = true
    for (let n in loginObj) {
        if (!loginObj[n]) {
            ElMessage({
                message: `请填写用户${n === 'id' ? '账号' : '密码'}`,
                type: 'warning',
            })
            next = false
            break
        }
    }
    if (!next) return
    
    const loading = ElLoading.service({
        lock: true,
        text: '登录中...',
        background: 'rgba(0, 0, 0, .2)',
    })

    ajax.post(
        '/login',
        {
            id: loginObj.id,
            /* 提交给后端的是一个字符串 */
            password: loginObj.password
        }
    ).then(({data}) => {
        if (data.code === 200) {
            // console.log(data)
            /* 缓存token数据 */
            store.commit('common/setToken', data.data.token)
            /* token是用解决http无状态的标识符，然后在请求的时候，需要把token在请求头传给后端 */
            /* 可是用id获取用户信息 */
            /* /user/:id 表示:id为动态字段 */
            ajax.get('/user/' + data.data.id).then(({data}) => {
                loading.close()
                // console.log(data)
                if (data.code === "200") {
                    // console.log(data.data)
                    store.commit('common/setUserInfo', data.data)
                }

                /* 判断是否记住密码？如果有需要缓存到localStorage */
                if (remember.value) {
                    localStorage.setItem('user-info', JSON.stringify(loginObj))
                } else {
                    localStorage.removeItem('user-info')
                }

                router.push('/home')
            })
        }else{
            ElMessage({
                message:'用户名或密码错误',
                type:'error',
            })
            loading.close()
        }
    })
}
function registerEvt(){
    router.push('/register')
}
</script>

<style lang="less">
    @import "../../style/common.less";

    .login-box {
        .rel();
        padding-top: 15vh;
        background: url(../../images/backimg.png) no-repeat;
        background-size: 100% 100%;
        /* less文件中可以使用嵌套的方式编写代码 */
        /* .login-box .content {} */
        .content {
            background: url(../../images/login.png) no-repeat !important;
            background-size: 480px 310px !important;
            display: block;
            position: relative;
            width: 480px;
            // height: 480px;
            margin: auto;
            // background: #f5f5e5;
            overflow: hidden;
            border-radius: 5%;
            opacity: .8;
            /* .login-box .content > .title {} */
            > .title {
                // margin-top: 50px;
                text-align: center;
                line-height: 68px;
                font-size: .9rem;
            }
            
            > .rem,
            > .ipt-box {
                display: block;
                width: 320px;
                padding: 10px;
                margin: 10px auto;
                border-bottom: solid 1px @cd;
                > input {
                    border: none;
                    width: 100%;
                    outline: none;
                    background: transparent;
                }
            }
            > .rem {
                border-bottom: none;
            }
            >div .btn {
                display: block;
                color: #3f3d3d !important;
                width: 300px;
                margin: 10px auto;
                line-height: 36px;
                font-size: .8rem;
                text-align: center;
                background: #5f74de;
                border: solid 1px #dfdfe1;
                border-radius: 18px;
                .touch();
                .register{
                    padding-left: 20px;
                }
            }
            >div .register{
                position: absolute;
                right:10px;
                bottom: 10px;
                 display: block;
                 color: #3f3d3d !important;
                width: 60px;
                // float: left;
                // margin: 10px auto;
                line-height: 36px;
                font-size: .8rem;
                text-align: center;
                .touch();
                .register{
                    padding-left: 20px;
                }
            }
        }
    }
</style>